<template>
    <div class="Knowledge">
        <div class="start">
            <h2>知识在线</h2>
            <div class="line_title"></div>
            <p>记录团队成长点滴以及对技术、理念的探索，同时我们乐于分享！</p>
        </div>
        <div class="nav_know" @click="clicknow(0)" >
            <a href="javascript:void(0)" @click="clicknow(1)"  :class="{choose:chooseClass===1}">技术知识</a>
            <a href="javascript:void(0)" @click="clicknow(2)"  :class="{choose:chooseClass===2}">常见问题</a>
            <a href="javascript:void(0)" @click="clicknow(3)"  :class="{choose:chooseClass===3}">解决方案</a>
        </div>
        <div class="knowMain">
            <div class="knowCard" v-for="(item,index) in newKnowledge" :key="index">
                <img :src="item.imgUrl" alt="">
                <div class="textCard">
                    <div class="title">
                        <span class="type">{{item.type}}</span>
                        <span class="titleMain" :title="item.title">{{item.title}}</span>
                    </div>
                    <p class="tags">{{item.tag}}</p>
                    <p CLASS="textMain">{{item.text}}</p>
                </div>
            </div>
            <div class="num">
                <span>共<b>1</b>页<b>{{num}}</b>条记录</span>
            </div>
        </div>
<!--        表单组件-->
        <question-ask class="ques"/>
    </div>
</template>

<script>
    export default {
        name: "Knowledge",
        components:{
            questionAsk:()=>import('../../components/question/question')
        },
        data(){
            return{
                knowledgeUl:[
                    {
                        imgUrl:require('../../assets/zhishi/img1.jpg'),
                        type:'解决方案',
                        title:'如何提高网站流量和访问量？',
                        tag:'2018-09-07 查看(2999)',
                        text:'针对大多客户提出的流量上不去，访问量很低的情况，最优工作室在此分享5种方法提高网站流量： 第一，网站的推广策略不佳；流量上不去，如果不是因为其他的原因，比如本文列到...',
                    },
                    {
                        imgUrl:require('../../assets/zhishi/img2.jpg'),
                        type:'常见问题',
                        title:'建设网站对企业有哪些好处？',
                        tag:'2018-09-07 查看(2932)',
                        text:'网站就是在互联网上一块固定的面向全世界发布消息的地方。它由域名（也就是网站地址）和网站空间构成。衡量一个网站的性能通常从网站空间大小、网站位置、网站连接速度、网站...',
                    },
                    {
                        imgUrl:require('../../assets/zhishi/img3.jpg'),
                        type:'常见问题',
                        title:'项目已经开发了app客户端，还有必要开发小程序',
                        tag:'2018-09-07 查看(2999)',
                        text:'最近收到一些咨询，问自己的项目（小型项目，用户量并不大）已经有ios和安卓客户端，还有网页版，是否有必要再开发小程序。 我们的建议是，是有必要开发小程序的，理由如下：...',
                    },
                    {
                        imgUrl:require('../../assets/zhishi/img4.png'),
                        type:'技术知识',
                        title:'怎么让网站支持https访问，让浏览器标记为安全',
                        tag:'2018-09-07 查看(3615)',
                        text:'现在https是趋势，很多地方需要强制使用https，比如微信小程序的网络请求、web-view等都需要目标url是支持https访问的。那么怎么才能让网站支持https访问呢？你只需要做两个事情就够了：...',
                    },
                    {
                        imgUrl:require('../../assets/zhishi/img5.png'),
                        type:'技术知识',
                        title:'微信小程序wx.setStorage保存时间多久失效？',
                        tag:'2018-09-07 查看(2999)',
                        text:'目前微信小程序wx.setStorage获得的缓存数据是持久保存的，不是永久，获得后就存在客户端，除非主动销毁或者从客户端删除该小程序。就是你在微信发现小程序列表里删除这个小程序。...',
                    },
                ],
                newKnowledge:[],
                num:0,
                chooseClass:0,
            }
        },
        created() {
           var id=parseInt(this.$route.params["id"]);
           this.clicknow(id)
           // console.log(typeof (id));
        },
        methods:{
            clicknow(id){
                var test=[];
                event.stopPropagation();
                // var doc=document.querySelectorAll('.nav_know a');
                // for(var i=1;i<=doc.length;i++){
                //     if(id===i){
                //         doc[i-1].style.background='#0595C7';
                //         doc[i-1].style.color='white';
                //         continue;
                //     }
                //     doc[i-1].style.background='none';
                //     doc[i-1].style.color='#666';
                // }
                // console.log(doc);
                if(id===0){
                    this.newKnowledge=this.knowledgeUl;
                    this.num=this.newKnowledge.length;
                }else if(id===1){
                    test.push(this.knowledgeUl.slice(-2));
                    this.newKnowledge=test["0"];
                    this.num=this.newKnowledge.length;
                    // console.log(this.newKnowledge);
                }else if(id===2){
                    test.push(this.knowledgeUl.slice(1,3));
                    this.newKnowledge=test["0"];
                    this.num=this.newKnowledge.length;

                }else if(id===3){
                    test.push(this.knowledgeUl.slice(0,1));
                    this.newKnowledge=test["0"];
                    this.num=this.newKnowledge.length;
                }
                this.chooseClass=id;

            }
        }

    }
</script>

<style lang="less" scoped>
.Knowledge{
    box-sizing: border-box;
    min-width: 1400px;
    width: 100%;
    .start{
        box-sizing: border-box;
        height: 400px;
        padding: 150px 170px;
        background: url("../../assets/zhishi/zhishi.jpg") no-repeat;
        background-size: 100% 100%;
        h2{
            color: white;
            font-size: 30px;
            font-weight: 400;
            margin-bottom: 15px;
        }
        .line_title{
            height: 2px;
            background: #0595C7;
            width: 70px;
        }
        p{
            color: white;
            opacity: .8;
        }

    }
    .nav_know{
        width: 400px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 70px;
        margin: 0 auto;
        a{
            /*height: 70px;*/
            height: 35px;
            display: block;
            line-height: 35px;
            color: #666666;
            width: 80px;
            text-align: center;
            transition: .3s ease-in-out;
            &:hover{
                background: #0595C7 !important;
                color: white !important;
            }

        }
    }
    .knowMain{
        background: #F1F1F1;
        width: 100%;
        box-sizing: border-box;
        padding: 20px 270px;
        .knowCard{
            border-bottom: 1px solid #cccccc;
            padding: 15px 15px;
            height: 200px;
            width: 100%;
            background: white;
            overflow: auto;
            img{
                float: left;
                height: 170px;
                width: 300px;
            }
            .textCard{
                float: left;
                width: 60%;
                margin-left: 40px;
                box-sizing: border-box;
                padding-top: 40px;
                /*min-width: 500px;*/
                /*display: flex;?*/
                /*align-items: center;*/
                .type{
                    margin-right: 15px;
                    background: #0595C7;
                    color: white;
                    display: block;
                    font-size: 13px;
                    float: left;
                    height: 25px;
                    line-height: 25px;
                    width: 70px;
                    text-align: center;
                }
                .titleMain{
                    float: left;
                    font-size: 18px;
                    display: block;
                    height: 25px;
                    line-height: 25px;
                    cursor: pointer;
                    &:hover{
                        color: #0595C7;
                    }

                }
                .tags{
                    display: block;
                    font-size: 12px;
                    color: #cccccc;
                    width: 300px;
                    margin-top: 30px;
                    margin-bottom: 0;
                    line-height: 40px;
                }
                .textMain{
                    font-size: 13px;
                    float: left;
                    color: #aaaaaa;
                    margin-top: 0;

                }
            }

        }
        .num{
            padding: 30px 0;
            height: 30px;
            span{
                display: block;
                width: 100px;
                height: 25px;
                line-height: 25px;
                background: white;
                font-size: 13px;
                color: #aaaaaa;
                margin: 0 auto;
                text-align: center;
                border: 1px solid #cccccc;
            }

        }
    }
    .choose{
        background: #0595C7 !important;
        color: white !important;
    }

}

</style>
